import React from 'react';
import {
  Card,
  CardContent,
  Typography,
  Chip,
  Box,
  CardActionArea,
} from '@mui/material';
import { Implementation } from '../../types';
import { useNavigate } from 'react-router-dom';

interface ImplementationCardProps {
  implementation: Implementation;
}

const ImplementationCard: React.FC<ImplementationCardProps> = ({ implementation }) => {
  const navigate = useNavigate();

  return (
    <Card sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
      <CardActionArea
        onClick={() => navigate(`/implementation/${implementation.id}`)}
        sx={{ flex: 1 }}
      >
        <CardContent>
          <Typography gutterBottom variant="h6" component="div">
            {implementation.title}
          </Typography>
          <Typography
            variant="body2"
            color="text.secondary"
            sx={{ mb: 2, minHeight: '40px' }}
          >
            {implementation.description}
          </Typography>
          <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
            {implementation.tags.map((tag) => (
              <Chip
                key={tag}
                label={tag}
                size="small"
                sx={{ mr: 1 }}
                onClick={(e) => {
                  e.stopPropagation();
                  navigate(`/tag/${tag}`);
                }}
              />
            ))}
          </Box>
          <Box sx={{ mt: 2 }}>
            <Chip
              label={implementation.difficulty}
              size="small"
              color={
                implementation.difficulty === '初级'
                  ? 'success'
                  : implementation.difficulty === '中级'
                  ? 'warning'
                  : 'error'
              }
            />
          </Box>
        </CardContent>
      </CardActionArea>
    </Card>
  );
};

export default ImplementationCard;
